<template>
	<a-card v-if="indexShow" :bordered="false">
		<s-table
			ref="table"
			:alert="options.alert.show"
			:columns="columns"
			:data="loadData"
			:expand-row-by-click="true"
			:row-key="(record) => record.id"
			:row-selection="options.rowSelection"
			:toolConfig="{ refresh: true, height: true, columnSetting: true, striped: false }"
			bordered
		>
			<template #operator>
				<a-space>
					<a-button type="primary" @click="openConfig()"> 新建</a-button>
					<batch-delete
						:selectedRowKeys="selectedRowKeys"
						buttonName="删除"
						title="确定要删除选中代码生成吗?"
						@batchDelete="deleteBatchCodeGen"
					/>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'tablePrefix'">
					{{ tablePrefixFilter(record.tablePrefix) }}
				</template>
				<template v-if="column.dataIndex === 'generateType'">
					{{ generateTypeFilter(record.generateType) }}
				</template>
				<template v-if="column.dataIndex === 'moduleType'">
					{{ moduleTypeFilter(record.moduleType) }}
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="genPreviewRef.onOpen(record)">预览</a>
						<a-button size="small" type="link" @click="choseExecGen(record)">生成</a-button>
						<a @click="openConfig(record)">配置</a>
						<a-popconfirm title="删除此配置？" @confirm="deleteCodeGen(record)">
							<a-button danger size="small" type="link">删除</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Steps v-else ref="stepsRef" @closed="closeConfig()" @successful="table.refresh(true)" />
	<GenPreview ref="genPreviewRef" />
	<a-modal v-model:visible="visible" title="生成选项" width="400px" @cancel="execCancel" @ok="execGen">
		<a-radio-group v-model:value="execType" :options="genConst.execTypeOptions"></a-radio-group>
	</a-modal>
</template>

<script name="genIndex" setup>
	import { message } from 'ant-design-vue'
	import genBasicApi from '@/api/gen/genBasicApi'
	import GenPreview from './preview.vue'
	import * as genConst from './genConst'
	import Steps from './steps.vue'

	const visible = ref(false)
	const table = ref()
	const indexShow = ref(true)
	const stepsRef = ref()
	const genPreviewRef = ref()
	const execRecord = ref()
	const execType = ref('ALL')

	const columns = [
		{
			title: '库名',
			dataIndex: 'configId',
			ellipsis: true
		},
		{
			title: '表名',
			dataIndex: 'dbTable',
			ellipsis: true
		},
		{
			title: '业务名',
			dataIndex: 'busName',
			ellipsis: true
		},
		{
			title: '功能名',
			dataIndex: 'functionName',
			ellipsis: true
		},
		{
			title: '类名',
			dataIndex: 'className',
			ellipsis: true
		},
		{
			title: '生成方式',
			dataIndex: 'generateType',
			ellipsis: true
		},
		{
			title: '生成模版',
			dataIndex: 'moduleType',
			ellipsis: true
		},
		{
			title: '作者',
			dataIndex: 'authorName',
			ellipsis: true
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '220px'
		}
	]
	// 表格查询 返回 Promise 对象
	const loadData = (parameter) => {
		return genBasicApi.basicPage(parameter).then((data) => {
			return data
		})
	}
	// 列表选择配置
	let selectedRowKeys = ref([])
	const options = reactive({
		alert: {
			show: true, //显示选择多少个
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	})
	//生成方式
	const generateTypeFilter = (text) => {
		const array = genConst.generateTypeOptions
		return array.find((f) => f.value === text).label
	}

	// 生成模版
	const moduleTypeFilter = (text) => {
		const array = genConst.moduleTypeOptions
		return array.find((f) => f.value === text).label
	}

	const tablePrefixFilter = (text) => {
		const array = genConst.tablePrefixOptions
		return array.find((f) => f.value === text).label
	}

	//选择生成前端还是后端
	const choseExecGen = (record) => {
		visible.value = true
		execRecord.value = record
	}
	//取消生成
	const execCancel = () => {
		visible.value = false
		execType.value = 'ALL'
	}

	// 生成代码
	const execGen = () => {
		let record = execRecord.value
		const param = {
			id: record.id,
			execType: execType.value
		}
		if (record.generateType === 'PRO') {
			genBasicApi.basicExecGenPro(param).then(() => {
				message.success('操作成功')
				table.value.refresh()
			})
		} else {
			// 下载压缩包
			genBasicApi.basicExecGenBiz(param).then((res) => {
				const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
				const contentDisposition = res.headers['content-disposition']
				const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
				const $link = document.createElement('a')
				$link.href = URL.createObjectURL(blob)
				$link.download = decodeURIComponent(patt.exec(contentDisposition)[1])
				$link.click()
				document.body.appendChild($link)
				document.body.removeChild($link) // 下载完成移除元素
				window.URL.revokeObjectURL($link.href) // 释放掉blob对象
			})
		}
		execCancel()
	}
	// 删除
	const deleteCodeGen = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		genBasicApi.basicDelete(params).then(() => {
			table.value.refresh()
		})
	}
	// 批量删除
	const deleteBatchCodeGen = (params, callback) => {
		genBasicApi
			.basicDelete(params)
			.then(() => {})
			.finally(() => {
				table.value.refresh()
				callback() //调用组件中的回调方法
			})
	}
	// 打开配置界面
	const openConfig = (record) => {
		indexShow.value = false
		nextTick(() => {
			stepsRef.value.configSteps(record)
		})
	}
	// 关闭配置界面
	const closeConfig = () => {
		indexShow.value = true
	}
</script>
